<template>
	<view class="user-content page" :style="{'--color': color}">
		<status-bar title='足迹'></status-bar>
		<backTop v-if='toTop'></backTop>
		<!-- 最近浏览/足迹 -->
		<view style="padding: 20rpx 0;">
			<GoodsList hot='0' v-show='likeList' :goodsData='likeList' type='1'></GoodsList>
			<view class="DiLine" v-if='showDiLine'>------ 我也是有底线的 ------</view>
		</view>
		<view v-if='nothing' style="text-align: center;color: #333;">
			<empty type='1' cat='4' msg='你还没有任何记录哦'></empty>
			<view style="text-decoration: underline;" class="thmeColor"  @click="backHome">去逛逛</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	var that;
	import GoodsList from '../../components/goodsList.vue'
	export default {
		components:{
			GoodsList
		},
		data() {
			return {
				
				toTop: false,
				
				
				nothing: false,
				likeList: [],
				page:1,
				pageNum: 10,
				more: false,
				showDiLine: false
			}
		},
		onShow() {
			
		},
		onLoad() {
			that = this
			that.getHistory();
			
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid,
				imageUrl: shareData.imageUrl
			}
		},
		onPullDownRefresh() {
			that.page = 1
			that.likeList = []
			that.getHistory()
		},
		methods: {
			getHistory() {// 获取足迹
				that.more = false
				that.nothing = false
				that.showDiLine = false
				that.$http.post({
					url: '/singleSaleApi/footprint',
					data: {
						v_id: uni.getStorageSync('vid'),
						bid: uni.getStorageSync('bid'),
						page: that.page,
						pageNum: that.pageNum
					}
				}).then(res => {
					if (res.data) {
						that.likeList = that.likeList.concat(res.data);
						if(res.data.length >= that.pageNum){
							that.page ++
							that.more = true
						}
					}
					if(that.likeList.length > 0 && (!res.data || res.data.length < that.pageNum)){
						that.showDiLine = true
					}
					if(that.likeList.length < 1){
						that.nothing = true
					}
					uni.stopPullDownRefresh()
				})
			}
		},
		computed:{
			...mapState(['vid','color','navHeight','System','nameDefinition'])
		},
		onPageScroll(e) {
			if (e.scrollTop > 300) {
				that.toTop = true;
			} else {
				that.toTop = false
			}
		},
		onReachBottom() {
			if(that.more){
				that.getHistory()
			}
		}
	}
</script>

<style scoped>
	.orderBox {
		background: #F5F5F5;
		padding: 24upx 0 0;
	}

	.priceNow {
		font-size: 28upx;
		font-weight: bold;
		color: #FF4B4E;
	}

	.priceRegion {
		color: #9A9A9A;
		text-decoration: line-through;
	}
	.gray{
		filter: grayscale(100%);
	}
	.youLike {
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.goodType {
		color: #FF4B4E;
		border: 1px solid #FF4B4E;
		border-radius: 6upx;
		padding: 0 6upx;
		font-size: 22upx;
		margin-right: 8upx;
	}

	.goodName {
		font-size: 26upx;
		height: 68upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin: 6upx 0;
	}

	.youTitle {
		text-align: center;
	}

	.goodsList {
		padding: 0 24upx 24upx 24upx;
		display: flex;
	}

	.goodsList .git {
		width: 100%;
		margin-right: 20upx;
		background: white;
		border-radius: 12upx;
		display: inline-block;
		padding: 10upx;
		margin-top: 20upx;
		position: relative;
		overflow: hidden;
	}
	
	.imgBox {
		/* height: 320upx; */
		position: relative;
		overflow: hidden;
	}

	.goodImg {
		/* max-width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%); */
	}
</style>
